
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>如何保证接口安全性 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>如何保证接口安全性 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">什么是JWT，它在身份验证中的主要优势是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">JWT（JSON Web Token）是用于在客户端和服务器之间安全地传递身份信息的一种技术。它的主要优势是自包含性，即Token本身包含了用户身份和授权信息，可以用于实现无状态的身份验证。</div>
          </div>
          <div class="card-source">来源: 1.1 认证机制</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在权限控制中，基于角色的访问控制（RBAC）和基于属性的访问控制（ABAC）有何主要区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">RBAC是根据用户角色来分配权限，角色决定了用户能访问的资源和操作。而ABAC则更加灵活和细粒度，它基于用户的属性、资源的属性以及环境条件来共同决定访问权限。</div>
          </div>
          <div class="card-source">来源: 2.1 权限控制</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">为防止数据在传输过程中被窃取或篡改，文档推荐了什么加密措施？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档推荐通过使用HTTPS协议（基于TLS）来加密客户端与服务器之间的通信，以防止数据在传输过程中被窃取或篡改。</div>
          </div>
          <div class="card-source">来源: 3.1 传输加密</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">如何有效防止SQL注入攻击？文档中提到的具体方法是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">为了防止SQL注入攻击，应该使用参数化查询（如Java中的PreparedStatement），而不是直接将用户输入嵌入或拼接到SQL语句中。</div>
          </div>
          <div class="card-source">来源: 4.1 输入验证</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">除了对输出进行编码，还有什么方法可以降低XSS攻击的风险？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">除了输出编码，还可以通过设置内容安全策略（CSP）头部来降低XSS攻击的风险。CSP可以限制浏览器允许加载的资源类型和来源。</div>
          </div>
          <div class="card-source">来源: 4.2 输出编码</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在安全设计中，“最小权限原则”的核心思想是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“最小权限原则”的核心思想是确保应用程序和用户仅拥有执行其任务所必需的最低权限，以此来减少潜在的攻击面和安全风险。</div>
          </div>
          <div class="card-source">来源: 5.1 最小权限原则</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">文档中提到的两种主要安全扫描技术是什么，它们有何不同？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">两种主要的安全扫描技术是：1. 静态代码分析，用于检测代码本身存在的安全漏洞。2. 动态扫描（DAST），通过模拟攻击来识别正在运行的应用程序中的安全问题。</div>
          </div>
          <div class="card-source">来源: 6.1 安全扫描</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">什么是应用防火墙（WAF），它的主要作用是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应用防火墙（WAF）是一种保护机制，用于保护Web应用程序免受常见的网络攻击，例如SQL注入和跨站脚本攻击（XSS）。</div>
          </div>
          <div class="card-source">来源: 7.1 防火墙与入侵检测</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">API网关在实现API安全策略中扮演什么角色？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">API网关用于集中管理API请求，它可以提供多种安全控制功能，如流量管理、负载均衡，以及实施API速率限制以防止滥用和DoS攻击。</div>
          </div>
          <div class="card-source">来源: 7.2 API安全策略</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
